<template>
	<view class="uiwu">
		<uiwu-tab-header headerIndex="2" />
		<view class="uiwu-money uiwu-flex-space">
			<view class="money uiwu-flex-align">
				<image src="/static/jinbi.png" mode="widthFix"></image>
				<text>金币余额：{{userInfo.now_money}}</text>
			</view>
			<image @tap="uiwu.openWindow('/pages/recharge/record')" src="/static/jifenmingxing.png" mode="widthFix" style="width: 60rpx;"></image>
		</view>
		<view class="uiwu-border"></view>
		<view class="uiwu-list uiwu-flex">
			<view 
				class="uiwu-list-item uiwu-flex-column uiwu-flex-center" 
				v-for="(item,index) in listData" 
				:key="index"
				@tap="chekedItem(item)"
			>
				<view class="title">{{item.coin}}币</view>
				<image src="/static/rejinbi.png" mode="widthFix"></image>
				<view class="tips">充值{{item.coin}}币送{{item.give_coin}}币</view>
				<view class="btn">
					<text class="uiwu-flex-center">￥{{item.price}}</text>
					<text></text>
				</view>
			</view>
		</view>
		<uiwu-payment-model :items="itemInfo" v-model="showModel"></uiwu-payment-model>
		<uiwu-tabBar :cuont="2" />
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { inject, ref , toRef} from 'vue';
	import { rechargelist } from '@/api/api';
	const uiwu = inject<any>('uiwu');
	const showModel = ref<boolean>(false);
	const listData = ref<Array<object>>([])
	const store = inject<any>('store');
	const userInfo = toRef(store.state,'userInfo')
	const itemInfo = ref({})
	const chekedItem = (item:object) => {
		showModel.value = true
		itemInfo.value = item
	}
	/**
	 * 获取充值套餐列表
	 */
	const getrechargelist = async () : void => {
		const { data:{recharge_quota} } = await rechargelist();
		listData.value = recharge_quota
	}
	onLoad(()=>{
		getrechargelist()
	})
</script>

<style lang="scss" scoped>
	page{
		background: url('../../static/yuandian.png') no-repeat 0 0 #FDD134;
		background-size: 100% 100%;
		padding-bottom: 22rpx;
	}
	.uiwu-money{
		background-color: #272323;
		width: 100%;
		padding: 12rpx 20rpx;
		.money{
			flex: 1;
			height: 60rpx;
			border-radius: 30rpx;
			border: 3rpx solid #FCE5C7;
			padding: 0 20rpx;
			margin-right: 38rpx;
			image{
				width: 40rpx;
				margin-right: 12rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	.uiwu-border{
		width: 100%;
		height: 6rpx;
		background: #EF821E;
	}
	.uiwu-list{
		flex-wrap: wrap;
		padding: 24rpx 24rpx 0;
		justify-content: space-between;
		&-item{
			width: 340rpx;
			height: 342rpx;
			background: url('../../static/rebg.png') no-repeat 0 0;
			background-size: 100% 100%;
			margin-bottom: 24rpx;
			justify-content: flex-start;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 58rpx;
			}
			image{
				width: 178rpx;
				margin-top: 19rpx;
			}
			.tips{
				font-size: 24rpx;
				font-weight: 500;
				color: #FCE5C7;
				margin: 16rpx 0 18rpx;
			}
			.btn{
				width: 252rpx;
				position: relative;
				margin-bottom: 40rpx;
				text{
					width: 252rpx;
					height: 56rpx;
					border-radius: 28rpx;
					border: 3rpx solid #000000;
					position: absolute;
					font-size: 32rpx;
					font-weight: bold;
					color: #231815;
					&:nth-child(1){
						background-color: #FAC500;
						z-index: 9;
						left: -2rpx;
						top: -4.5rpx;
					}
					&:nth-child(2){
						left: 2rpx;
						top: 4.5rpx;
						background: linear-gradient(180deg, #8DC21F 0%, #5BB431 100%);
					}
				}
			}
		}
	}
</style>
